<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>公告发布</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20" class="seacher">
      <!-- 发布公告 -->
      <el-col :span="4">
        <el-button type="primary" @click="Visible = true">发布公告</el-button>
      </el-col>
    </el-row>
    <!-- 公告发布区 -->
    <el-dialog :title="isUpdate ? '修改公告' : '发布公告'" :visible.sync="Visible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="公告标题:">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="公告内容:">
          <el-input type="textarea" v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button v-if="!isUpdate" type="primary" @click="onSubmit">立即发布</el-button>
          <el-button v-else type="primary" @click="onUpdate">修改公告</el-button>
          <el-button @click="Visible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 订单区 -->
    <el-card class="box-card">
      <!-- 订单区 -->
      <div class="box-body">
        <table class="goods">
          <thead>
            <tr>
              <th width="150">公告编号</th>
              <th width="420">标题</th>
              <th width="420">内容</th>
              <th width="150">发布日期</th>
              <th width="150">操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- 此处v-for -->
            <tr v-for="item in noticeList" :key="item.oid">
              <td>{{ item.nid }}</td>
              <td>{{ item.title }}</td>
              <td>{{ item.content }}</td>
              <td>{{ $toDate(item.create_time) }}</td>
              <td>
                <el-button type="primary" icon="el-icon-edit" circle @click="update(item.nid)"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="del(item.nid)"></el-button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getNoticeList, publicNotice, delNotice, updateNotice } from '@/api/notice'
export default {
  name: 'NoticeManage',
  data() {
    return {
      noticeList: [],
      form: {
        title: '',
        content: '',
        nid: null,
      },
      Visible: false,
      isUpdate: false,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getNoticeList().then((result) => (this.noticeList = result.data))
    },
    async onSubmit() {
      const result = await publicNotice({ ...this.form })
      if (result.status !== 0) return this.$message.error(result.message)
      this.$message.success(result.message)
      this.form = {}
      this.Visible = false
      this.getList()
    },
    async del(nid) {
      const confirmResult = await this.$confirm('此操作将永久删除该"公告", 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)

      if (confirmResult !== 'confirm') return

      const result = await delNotice({ nid })
      console.log(result)
      if (result.status !== 0) return this.$message.error('删除失败！')
      this.$message.success('删除成功！')
      this.getList()
    },
    update(nid) {
      this.isUpdate = true
      this.Visible = true
      this.form.nid = nid
    },
    async onUpdate() {
      const result = await updateNotice({ ...this.form })
      if (result.status !== 0) return this.$message.error(result.message)
      this.$message.success(result.message)
      this.form = {}
      this.isUpdate = false
      this.Visible = false
      this.getList()
    },
  },
}
</script>

<style lang="less" scoped>
.box-card,
.el-button,
.el-table {
  margin-top: 30px;
}

.el-form {
  margin-top: 40px;
  width: 600px;
}
.goods {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  .info {
    display: flex;
    text-align: left;
    text-decoration: none;
    color: #27ba9b;
    img {
      width: 70px;
      height: 70px;
      margin-right: 20px;
    }
    .right {
      line-height: 24px;
      p {
        &:last-child {
          color: #999;
        }
      }
    }
  }
  tr {
    th {
      background: #f5f5f5;
      font-weight: normal;
    }
    td,
    th {
      text-align: center;
      padding: 20px;
      border-bottom: 1px solid #f5f5f5;
      &:first-child {
        border-left: 1px solid #f5f5f5;
      }
      &:last-child {
        border-right: 1px solid #f5f5f5;
      }
    }
  }
}
</style>
